<template>
	<s-layout title="全网服务中心" tabbar="/pages/index/serve" :bgStyle="{ color: '#151515' }">
		<view class="search-wrapper">
			<uni-easyinput
			  type="text"
			  :inputBorder="false"
			  disabled
			  :styles="{ disableColor: '#1E1E1E' }"
			  placeholderStyle="color:#767676;font-size:24rpx;"
			  placeholder="选择地区"
			/>
			<image src="@/static/img/public-icon-3.png" mode=""></image>
		</view>
		<view class="list-box">
			<view v-for="item in 8" class="list-item">
				<view class="list-item-l">
					<image src="@/static/img/serve-icon-1.png" mode=""></image>
					<view class="list-item-t">
						<view class="list-item-t1">深圳服务中心</view>
						<view class="list-item-t2">联创剩余名额：5/20</view>
						<view class="list-item-t2">VIP剩余名额：5/20</view>
					</view>
				</view>
				<view class="list-item-r">立即抢名额</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		computed,
		reactive,
		unref
	} from 'vue';

	const sys_navBar = sheep.$platform.navbar;
	const cart = sheep.$store('cart');

	const state = reactive({
		editMode: false,
		list: computed(() => cart.list),
		selectedList: [],
		selectedIds: computed(() => cart.selectedIds),
		isAllSelected: computed(() => cart.isAllSelected),
		totalPriceSelected: computed(() => cart.totalPriceSelected),
	});

	// 单选选中
	function onSelectSingle(id) {
		cart.selectSingle(id);
	}
	// 全选
	function onSelectAll() {
		cart.selectAll(!state.isAllSelected);
	}

	// 结算
	function onConfirm() {
		let goods_list = [];
		state.selectedList = state.list.filter((item) => state.selectedIds.includes(item.id));
		state.selectedList.map((item) => {
			goods_list.push({
				goods_id: item.goods_id,
				goods_num: item.goods_num,
				goods_sku_price_id: item.goods_sku_price_id,
			});
		});
		if (goods_list.length === 0) {
			sheep.$helper.toast('请选择商品');
			return;
		}
		sheep.$router.go('/pages/order/confirm', {
			data: JSON.stringify({
				order_type: 'goods',
				goods_list,
				from: 'cart',
			}),
		});
	}

	function onNumberChange(e, cartItem) {
		if (e === 0) {
			cart.delete(cartItem.id);
			return;
		}
		if (cartItem.goods_num === e) return;
		cartItem.goods_num = e;
		cart.update({
			goods_id: cartItem.goods_id,
			goods_num: e,
			goods_sku_price_id: cartItem.goods_sku_price_id,
		});
	}
	async function onDelete() {
		cart.delete(state.selectedIds);
	}
</script>

<style lang="scss" scoped>
	.search-wrapper{
		margin: 30rpx;
		background-color: #1E1E1E;
		border-radius: 50rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		image{
			width: 17rpx;
			height: 11rpx;
		}
	}
	.list-box{
		margin: 30rpx;
		.list-item{
			padding: 30rpx;
			background: #1E1E1E;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.list-item-l{
				display: flex;
				align-items: center;
				image{
					width: 140rpx;
					min-width: 140rpx;
					height: 140rpx;
					margin-right: 30rpx;
				}
				.list-item-t{
					.list-item-t1{

						font-weight: 400;
						font-size: 30rpx;
						color: #E4E4E4;
					}
					.list-item-t2{
						margin-top: 15rpx;

						font-weight: 300;
						font-size: 24rpx;
						color: #888888;
					}
				}
			}
			.list-item-r{
				width: 160rpx;
				height: 54rpx;
				line-height: 54rpx;
				background: linear-gradient(90deg, #45C9F0, #36F6AF);
				border-radius: 27rpx;
				text-align: center;

				font-weight: 500;
				font-size: 24rpx;
				color: #090909;
			}
		}
	}
</style>
